<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的传参</title>
</head>

<body>
    <div id="app">
        <div>-------------父组件的内容----------</div>
        <h2>实例</h2>
        <h2>{{ msg }}</h2>
        <div>-------------子组件的内容----------</div>
        <!--    <comp :compmsg="msg"></comp>-->
        <comp :compmsg="msg" :compmsg2="msg2"></comp>
        <!--    <comp></comp>-->
    </div>

    <template id="comp">
    <div>
        <h2>子组件标题</h2>
        <p>{{compmsg}}</p>
        <p>{{compmsg2}}</p>
    </div>
</template>

    <script src="./vue.js"></script>
    <script>
        //  props可以是一个数组,也可以是一个对象
        //  1.props: ["compmsg","compmsg2"]
        // 2.props:{//主要是为了限制参数 (数据类型,还可以提供一些默认值)
        //        compmsg:{
        //             type: String,
        //             default: 'compmsg参数的默认值'
        //        },
        // 
        //子组件
        Vue.component("comp", {
            template: "#comp",
            // props: ["compmsg","compmsg2"],
            // props:{//主要是为了限制参数 (数据类型,还可以提供一些默认值)
            //     compmsg:{
            //         type: String,
            //         default: 'compmsg参数的默认值'
            //     },
            //     compmsg2:{
            //         type: Object,
            //         default: function (){
            //             return {}
            //         }
            //     }
            // }
            props: { //主要是为了限制数据类型
                compmsg: String,
                compmsg2: Object,
            }
        })

        //vue 实例1 root组件 (根组件)
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hahahah",
                msg2: {
                    name: "哈哈",
                    age: 18
                },

            }
        })
    </script>
</body>

</html>